<template>
  <div class="productListcontent" ref="cont">
    <a-form-model layout="inline" :form="seachForm">
      <a-form-model-item label="商品分类：" prop="class">
        <a-tree-select
          v-model="seachForm.class_id"
          style="width:175px;"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="classData"
          :replaceFields="{key:'id',value:'id'}"
          allow-clear
          placeholder="选择栏目"
        >
        </a-tree-select>
      </a-form-model-item>
      <a-form-model-item label="商品搜索：" prop="title">
        <a-input placeholder="输入商品名称" v-model="seachForm.title" style="width:175px;" />
      </a-form-model-item>
      <a-form-model-item>
        <a-button type="primary" @click="seachSubmit">
          搜索
        </a-button>
      </a-form-model-item>
    </a-form-model>
    <div class="btns acea-row row-middle">
      <a-space :size="10">
        <a-button type="primary" icon="plus" @click="toDetail('/product/product_detail')">
          添加商品
        </a-button>
        <a-button type="danger" >
          复制淘宝商品
        </a-button>
      </a-space>
    </div>
    <a-table :columns="columns" :pagination="false" :loading="loading" rowKey="id" :data-source="list" :scroll="{ x: list.length > 0&&screenWidth<=1400?1500:0, y: 0 }" >
      <div slot="pic" slot-scope="record"><img class="pic" :src="record.pic" alt=""></div>
      <div slot="title" slot-scope="record" class="line2" :title="record.title">{{record.title}}</div>
      <div slot="action" slot-scope="record" class="action acea-row row-middle">
        <router-link :to="'/product/product_detail?id='+record.id" class="acea-row row-middle" >编辑<p></p></router-link>
        <a href="javascript:;" class="acea-row row-middle" @click="getReply(record.id)">查看评论<p></p></a>
        <a-popconfirm :title="record.type==1?'确认下架':'确认上架'" ok-text="确定" cancel-text="取消" @confirm="edit(record.type==1?2:1,record.id)" v-if="record.type==1||record.type==2">
          <a href="javascript:;" class="acea-row row-middle" >{{record.type==1?'下架':'上架'}}</a>
        </a-popconfirm>
        <a-popconfirm :title="record.type==3?'确认恢复':'确认移动'" ok-text="确定" cancel-text="取消" @confirm="edit(record.type==3?1:3,record.id)" v-if="record.type==1||record.type==3">
          <a href="javascript:;" class="acea-row row-middle" ><p v-if="record.type==1"></p>{{record.type==3?'恢复商品':'移动到回收站'}}</a>
        </a-popconfirm>
      </div>
    </a-table>
    <div class="acea-row row-right" style="margin-top:20px">
      <a-pagination show-quick-jumper :defaultPageSize="limit" v-model="page" :total="count" @change="getData" />
    </div>
  </div>
</template>

<script>
import request from 'api/request'

const columns = [
  { title: '商品ID', dataIndex: 'id',width:100, key: 'id' },
  { title: '商品图', key: 'pic',width:100,scopedSlots: { customRender: 'pic' }},
  { title: '商品名称', key: 'title',width:300,scopedSlots: { customRender: 'title' }},
  { title: '商品售价', dataIndex: 'price',width:200, key: 'price'},
  { title: '销量', dataIndex: 'sales',width:150, key: 'sales'},
  { title: '库存', dataIndex: 'stock',width:150, key: 'stock'},
  { title: '排序', dataIndex: 'sort',width:100, key: 'sort'},
  { title: '操作', key: 'action',width:300 ,scopedSlots: { customRender: 'action' },fixed:'right'},
]

export default {
  props:{
    type:{
      type:[String,Number],
      default:"1"
    }
  },
  data() {
    return {
      columns,
      list:[],
      screenWidth: 0,
      page:1,
      limit:10,
      count:0,
      seachForm:{
        class_id:null,
        title:''
      },
      loading:false,
      classData:[]
    }
  },
  created() {
    // console.log("productListcontent-created",this.type)
    this.getData()
    this.getClass()
  },
  methods: {
    getData(type){
      this.loading = true
      let data = {
        type:this.type,
        page:this.page,
        limit:this.limit
      }
      request.get("/product/list",data).then(e=>{
        if(e.status == 200){
          this.list = e.data.data
          this.count = e.data.count
        }
        this.loading = false
      })
    },
    getClass(){
      request.get("/product/getClass").then(e=>{
        if(e.status == 200){
          let arr = []
          for(let i of e.data){
            if(i.pid == 0){
              i.children = e.data.filter(s=>s.pid == i.id)
              arr.push(i)
            }
          }
          this.classData = arr
        }
      })
    },
    getReply(id){
      sessionStorage.setItem("replyProductId",id)
      this.$router.push("/product/product_reply")
    },
    edit(type,id){
      let params = {
        type,
        id
      }
      request.post("/product/changeType",params).then(e=>{
        if(e.status == 200){
          this.getData(this.type)
          this.$message.success("修改成功")
        }
      })
    },
    seachSubmit(){ // 搜索submit
      let seachForm = this.seachForm
      seachForm.type = this.type
      seachForm.page = this.page,
      seachForm.limit = this.limit
      this.loading = true
      request.get("/product/list",seachForm).then(e=>{
        if(e.status == 200){
          this.list = e.data.data
          this.count = e.data.count
        }
        this.loading = false
      })
    },
    toDetail(path){
      this.$router.push({path})
    }
  },
  watch:{
    type(e){
      // console.log("productListcontent-watch",e)
      this.getData(e)
    },
  },
  mounted() {
    const that = this
    let cont = this.$refs.cont
    this.screenWidth = cont.clientWidth
    window.addEventListener("resize",(e)=>{
      that.screenWidth = cont.clientWidth
    })
  },
}
</script>

<style scoped>
  .productListcontent .pic{
    display: block;
    width: 36px;
    height: 36px;
  }
  .line2{
    width: 300px;
    display: -webkit-box; 
    -webkit-box-orient: vertical; 
    -webkit-line-clamp: 2; 
    overflow: hidden;
  }
  .productListcontent .action p{
    height: 14px;
    width: 1px;
    margin: 0 10px;
    background-color: #515a6e;
  }
  .btns{
    margin-top: 20px;
  }
</style>